<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>修改题库</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="../js/base.js"></script>
    <script src="../js/jquery.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>题干
                </label>
                <div class="layui-input-inline">
                    <textarea class="layui-textarea" id="content" name="content" required=""
                              lay-verify="required"></textarea>
                </div>
                <input type="hidden" id="id" name="id">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>选项是文字还是图片
                </label>
                <div class="layui-input-block">
                    <input type="radio" lay-filter="radio" name="wordOrImg" value="1" id="radio1" title="文字" checked="">
                    <input type="radio" lay-filter="radio" name="wordOrImg" value="2" id="radio2" title="图片">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>是否多选题
                </label>
                <div class="layui-input-block">
                    <input type="radio" lay-filter="isMultipleSelect" name="isMultipleSelect" id="isMultipleSelect1"
                           value="1" title="是">
                    <input type="radio" lay-filter="isMultipleSelect" name="isMultipleSelect" id="isMultipleSelect2"
                           value="2" title="否" checked="">
                </div>
            </div>
            <div id="options">

            </div>
            <div id="optionss">

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>答案
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="answer" name="answer" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>申请等级
                </label>
                <div class="layui-input-inline">
                    <select name="level" id="level" lay-verify="required" lay-search>
                        <option value="1">1级</option>
                        <option value="2">2级</option>
                        <option value="3">3级</option>
                        <option value="4">4级</option>
                        <option value="5">5级</option>
                        <option value="6">6级</option>
                        <option value="7">7级</option>
                        <option value="8">8级</option>
                        <option value="9">9级</option>
                        <option value="10">10级</option>
                    </select>
                </div>
            </div>
            <!--            <button type="button" class="layui-btn" onclick="optionAdd()">添加选项</button>-->
            <div class="layui-form-item">
                <label class="layui-form-label">题干图片</label>
                <div class="layui-input-inline" style="overflow: hidden">
                    <img src="" id="imgUrl" width="100%">
                    <input type="text" id="url" style="display: none" name="title" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上传图片</label>
                <div class="layui-input-inline" style="width: 300px;overflow: hidden">
                    <input type="text" class="layui-input" id="fileName" placeholder="上传文件" id="test2">
                </div>
                <button type="button" class="layui-btn" id="test1"
                        style=" height: 30px;line-height: 30px;">选择文件
                </button>
            </div>
            <div style="text-align: center;margin-bottom: 20px">
                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
            </div>
            <div class="layui-form-item" style="text-align: center">
                <button type="submit" lay-filter="add" lay-submit="" class="layui-btn">确定</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="xadmin.close()">取消</button>
            </div>
        </form>
        <input id="option" type="hidden">
        <input id="optionContent" type="hidden">
        <input id="radioChecked" type="hidden">
        <input id="isMultipleSelect" type="hidden">
    </div>
</div>
<script>
    $(function () {
        setTimeout(function () {
            var option = $("#option").val();
            var optionContent = $("#optionContent").val();
            var optionArry = option.split(",")
            var optionContentArry = optionContent.split(",")
            var str = "";
            var radioChecked = $("#radioChecked").val();
            if (radioChecked == '1') {
                $("#options").attr("style", "display: block");
                $("#optionss").attr("style", "display: none");
                for (var i = 0; i < optionArry.length; i++) {
                    str += '<div class="layui-form-item">\n' +
                        '          <label  class="layui-form-label option">' + optionArry[i] + '</label>\n' +
                        '          <div class="layui-input-inline">\n' +
                        '              <input type="text" autocomplete="off" class="layui-input optionContent" value="' + optionContentArry[i] + '">\n' +
                        '          </div>\n' +
                        '</div>';
                }
                $("#options").append(str);
                str = "";
                for (var i = 0; i < optionArry.length; i++) {
                    str += '<div class="layui-form-item">\n' +
                        '        <label  class="layui-form-label options">' + optionArry[i] + '</label>\n' +
                        '        <div class="layui-input-inline">\n' +
                        '             <img src="" id="imgUrl' + optionArry[i] + '" width="25%">\n' +
                        '              <input type="text" class="layui-input" id="fileNameA" placeholder="上传文件" style="margin:0 10px;width: 40%;display: inline-block">\n' +
                        '              <button type="button" class="layui-btn" id="testA">选择文件</button>\n' +
                        '        </div>\n' +
                        ' </div>'
                }
                $("#optionss").append(str);
            } else {
                $("#optionss").attr("style", "display: block");
                $("#options").attr("style", "display: none");
                for (var i = 0; i < optionArry.length; i++) {
                    str += '<div class="layui-form-item">\n' +
                        '          <label  class="layui-form-label option">' + optionArry[i] + '</label>\n' +
                        '          <div class="layui-input-inline">\n' +
                        '              <input type="text" autocomplete="off" class="layui-input optionContent" value="">\n' +
                        '          </div>\n' +
                        '</div>';
                }
                $("#options").append(str);
                str = "";
                for (var i = 0; i < optionArry.length; i++) {
                    str += '<div class="layui-form-item">\n' +
                        '        <label  class="layui-form-label options">' + optionArry[i] + '</label>\n' +
                        '        <div class="layui-input-inline">\n' +
                        '             <img src="' + optionContentArry[i] + '" id="imgUrl' + optionArry[i] + '" width="25%">\n' +
                        '              <input type="text" class="layui-input" id="fileNameA" placeholder="上传文件" style="margin:0 10px;width: 40%;display: inline-block">\n' +
                        '              <button type="button" class="layui-btn" id="testA">选择文件</button>\n' +
                        '        </div>\n' +
                        ' </div>'
                }
                $("#optionss").append(str);
            }
        }, 200)
    })
    layui.use(['form', 'layer'],
        function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;
            setTimeout(function () {
                if ($("#radioChecked").val() == '1') {
                    $("#radio1").prop("checked", "checked");
                } else {
                    $("#radio2").prop("checked", "checked");
                }
                if ($("#isMultipleSelect").val() == '1') {
                    $("#isMultipleSelect1").prop("checked", "checked");
                } else {
                    $("#isMultipleSelec2").prop("checked", "checked");
                }
                form.render();
            }, 200)

            form.on('radio(radio)', function (data) {
                // alert(data.elem);
                if (data.value == "1") {
                    $("#options").attr("style", "display: block");
                    $("#optionss").attr("style", "display: none");
                } else {
                    $("#optionss").attr("style", "display: block");
                    $("#options").attr("style", "display: none");
                }
            });

            //监听提交
            form.on('submit(add)',
                function (data) {
                    var result = []
                    var option = []
                    var radioChecked = $("input[name='wordOrImg']:checked").val();
                    console.log(radioChecked, "radioChecked");
                    var isMultipleSelect = $("input[name='isMultipleSelect']:checked").val();
                    console.log(isMultipleSelect, "isMultipleSelect");
                    if (radioChecked == '1') {//文字
                        $(".optionContent").each(function () {
                            result.push($(this).val())
                        })
                        $(".option").each(function () {
                            option.push($(this).text())
                        })
                    } else {//图片
                        result.push($('#imgUrlA').attr("src"))
                        result.push($('#imgUrlB').attr("src"))
                        result.push($('#imgUrlC').attr("src"))
                        result.push($('#imgUrlD').attr("src"))
                        $(".options").each(function () {
                            option.push($(this).text())
                        })
                    }
                    var url = []
                    $("#url").each(function () {
                        url.push($(this).val())
                    })
                    //发异步，把数据提交给php
                    $.ajax({
                        type: "post",
                        url: addExamination,
                        data: {
                            content: $("#content").val(),
                            answer: $("#answer").val(),
                            imgUrl: JSON.stringify(url),
                            option: JSON.stringify(option),
                            optionContent: JSON.stringify(result),
                            id: $("#id").val(),
                            level: $("#level").val(),
                            wordOrImg: radioChecked,
                            isMultipleSelect: isMultipleSelect
                        },
                        success: function (res) {
                            console.log(res)
                            if (res.msg == 0) {
                                layer.alert("修改成功", {icon: 6}, function () {
                                    //关闭当前frame
                                    xadmin.close();
                                    // 可以对父窗口进行刷新
                                    xadmin.father_reload();
                                });
                            } else {
                                layer.alert(res.msg, function (index) {
                                    if (res.msg == "session已失效，请重新登录") {
                                        parent.parent.window.location.href = getRequestPrefix() + "/footBallAdmin/login.html"
                                        xadmin.close();
                                    } else {
                                        layer.close(index);
                                    }
                                });
                            }
                        },
                        error: function (error) {
                            console.log(error)
                        }
                    })
                    return false;
                });

            layui.use('upload', function () {
                var upload = layui.upload;

                //执行实例
                var uploadInst = upload.render({
                    elem: '#test1',
                    url: uploadExaminationImg,//导入
                    method: "post",
                    accept: "file",//允许上传的文件类型
                    // exts: 'xlsx|xls',//上传的文件后缀.只能是xlsx和xls格式
                    size: 1000 * 1024,//设置文件最大可允许上传的大小，单位 KB
                    auto: false, //选择文件后不自动上传
                    bindAction: '#testListAction',//指定一个按钮触发上传
                    choose: function (obj) {
                        // //将每次选择的文件追加到文件队列
                        // var files = obj.pushFile();
                        //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                        obj.preview(function (index, file, result) {
                            // console.log(index); //得到文件索引
                            console.log(file); //得到文件对象
                            // console.log(result); //得到文件base64编码，比如图片
                            $("#fileName").val(file.name)
                            //obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增

                            //这里还可以做一些 append 文件列表 DOM 的操作

                            //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
                            //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
                        });
                    },
                    before: function (obj) {
                        layer.load();
                    },
                    //上传接口 //绑定元素
                    done: function (res) {
                        //上传完毕回调
                        layer.closeAll('loading');
                        console.log(res)
                        if (res.msg == 0) {
                            $("#imgUrl").attr("src", res.url);
                            $("#url").val(res.url);
                            //do something （比如将res返回的图片链接保存到表单的隐藏域）
                            layer.msg("上传成功")
                        } else {
                            layer.msg(res.msg)
                        }
                    },
                    error: function () {
                        //请求异常回调
                        layer.closeAll('loading');
                        layer.msg('网络异常，请稍后重试！');
                    }
                });
            });

        });

    function optionAdd() {
        $("#optionAdd").append('<div class="layui-form-item">' +
            '<label class="layui-form-label option" contenteditable>请输入选项</label>' +
            '<div class="layui-input-inline">' +
            '<input type="text" autocomplete="off" class="layui-input optionContent">' +
            '</div>' +
            '</div>');
    }

    function getRequestPrefix() {
        // 获取网络协议
        // 获取主机名+端口号
        var domainPort = window.location.host;
        // 获取发布项目的名称
        // 获取路径
        var url = window.location.pathname;
        var webApp = url.split('/')[1];
        // http://127.0.0.1/demo
        var urlPrefix = "http://" + domainPort + "/" + webApp;
        return urlPrefix;
    }
</script>
</body>

</html>